import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarTitle from "@/components/AvatarTitle";
import { AvatarAPIWantAvatar } from "@/type/wwwAPI";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";

export default function AvatarView({
  avatar: { avatarID, avatarName, avatarIntro },
}: {
  avatar: AvatarAPIWantAvatar;
}) {
  return (
    <Row>
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col>
        <Stack gap={2}>
          <AvatarTitle avatarID={avatarID} avatarName={avatarName} textID />
          <span>{avatarIntro}</span>
        </Stack>
      </Col>
    </Row>
  );
}